<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乡村振兴</title>
		<script src="./js/vue.js"></script>
		<script src="./js/index.js"></script>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.header {
			width: 100%;
			height: auto;
			margin-top: 30px;
		}

		.header .header-center {
			height: auto;
			width: 1200px;
			margin: auto;
		}

		.logo {
			width: 293px;
			height: 61px;
			display: inline-block;
		}

		.search {
			width: 400px;
			height: 61px;
			display: inline-block;
			margin-left: 60px;
			vertical-align: top;
		}

		.call-me {
			width: 210px;
			height: 61px;
			display: inline-block;
			margin-left: 120px;
			vertical-align: top;
		}

		.call-me i {
			font-size: 40px;
			display: inline-block;
			position: relative;
			top: 3px;
			color: #1362b0;
		}

		.call-me .phonenumber {
			display: inline-block;
		}

		.call-me span {
			display: block;
			height: 20px;
			position: relative;
			top: 10px;
			font-size: 12px;
		}

		.call-me strong {
			display: block;
			height: 41px;
			position: relative;
			font-size: 22px;
			font-weight: bold;
			top: 5px;
			color: #1362b0;
		}

		a {
			text-decoration: none;
		}

		.header-menue {
			width: 100%;
			background-color: #1362b0;
			margin-top: 20px;
		}

		.header-menue .el-menu-demo {
			width: 1000px;
			margin: auto;
			border-bottom: none;
		}

		.header-menue .el-menu-demo a {
			font-size: 16px;
		}

		.content {
			width: 100%;
			margin-top: 40px;
		}

		.content .content1 {
			width: 1200px;
			margin: auto;
		}

		.content .content1 .content1-l {
			width: 700px;
			height: 430px;
			display: inline-block;
			vertical-align: top;
		}

		.content .content1 .content1-r {
			width: 460px;
			height: 430px;
			display: inline-block;
			margin-left: 35px;
		}

		.content1-r .el-card__header {
			padding-left: 12px;
		}

		.el-divider {
			margin: 5.5px 0;
		}

		.el-card__body {
			padding: 10px 9px 5px 9px;
		}

		.content1-r .el-card__header {
			border-bottom: none;
		}

		.content2 .el-card__header {
			padding-left: 12px;
		}

		.content2 .el-card {
			border-left: none;
			border-right: none;
			border-bottom: none;
			border-top: 2px solid #1362B0;
			margin-top: 30px;
		}
		.content2-r .el-link--inner{
			display: block;
			width: 310px;
			overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
		}
		 .el-carousel__item:nth-child(2n) {
		    background-color: #000;
		  }
		  
		  .el-carousel__item:nth-child(2n+1) {
		    background-color: #000;
		  }
	</style>
	<body>
		<div id="app">
			<div class="header">
				<div class="header-center">
					<div class="logo">
						<el-image :fit="fit" :src="src">
						</el-image>
					</div>
					<div class="search">
						<el-input placeholder="请输入关键字" v-model="input" clearable style="top: 10px; width: 400px;">
							<el-button slot="append" style="background-color: #1362b0; color: white;">搜索</el-button>
						</el-input>
					</div>
					<div class="call-me">
						<i class="el-icon-phone-outline"></i>
						<div class="phonenumber">
							<span>24小时咨询热线</span>
							<strong>010-12345678</strong>
						</div>
					</div>
				</div>
			</div>
			<div class="header-menue">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#1362b0"
					text-color="#fff" active-text-color="#fff">
					<el-menu-item index="1"><a href="#">网站首页</a></el-menu-item>
					<el-menu-item index="2"><a href="#">宏观形势</a></el-menu-item>
					<el-menu-item index="3"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="4"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="5"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="6"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="7"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="8"><a href="#">政策数据库</a></el-menu-item>
				</el-menu>
			</div>
			<div class="content">
				<div class="content1">
					<div class="content1-l">
						<el-carousel height="430px">
							<el-carousel-item v-for="item in 4" :key="item">
								<el-image :fit="fit" :src="src1">
								</el-image>
							</el-carousel-item>
						</el-carousel>
					</div>
					<div class="content1-r">
						<el-card class="box-card" shadow="never">
							<div slot="header" class="clearfix">
								<span
									style="color: #30313;font-weight: bold; background: url(img/title_left.jpg) no-repeat; padding-left: 10px;">热点关注</span>
								<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
							</div>
							<div v-for="o in 5" :key="o" class="text item">
								<el-divider></el-divider>
								<h2
									style="font-weight: 400;display: block; overflow: hidden; text-overflow: ellipsis; height: 30px;line-height: 32px; font-size: 16px;white-space: nowrap; color: #000;">
									国家发改委副主任宁吉喆：乘势而上，巩固扩大经济恢复成果的说法是</h2>
								<p
									style="overflow: hidden; text-overflow: ellipsis; height: 30px;line-height: 32px; font-size: 14px;white-space: nowrap; color: #aaa;">
									今年以来，克服新冠肺炎疫情带来的不利影响，我国经济稳</p>
							</div>
						</el-card>
					</div>
				</div>
				<div style="width: 1200px; margin: auto; border-top: 2px solid #000; margin-top: 30px;">
					<template>
					  <el-carousel :interval="4000" type="card" height="200px">
					    <el-carousel-item v-for="item in 6" :key="item">
					      <div class="content2-l-fix">
					      	<el-image style="width: 300px; height: 200px" :src="url" :fit="fit"></el-image>
					      	<div style="width: 290px; vertical-align: top;display: inline-block;">
					      		<h2
					      			style="font-weight: 700;display: block; overflow: hidden; text-overflow: ellipsis; height: 30px;line-height: 32px; font-size: 15px;white-space: nowrap; color: #fff;">
					      			国家发改委副主任宁吉喆：乘势而上，巩固扩大经济恢复成果的说法是</h2>
					      		<p
					      			style="overflow-y: hidden; height: 75px;line-height: 24px; font-size: 14px;color: #fff;display: block;margin-top: 20px;">
					      			来源：新浪财经文/新浪财经意见领袖专栏作家李湛、方鹏飞、尧艳珍一、海外经济及市场形势（一）美国经济前景仍面临变数，欧洲经济现复苏势头美国制造业PMI与非制造业PMI持续回升，但美国经济前景仍面临不小变数。美国7月I……
					      		</p>
					      	</div>
					      </div>
					    </el-carousel-item>
					  </el-carousel>
					</template>
				</div>
				<div class="content2" style="width: 1200px; margin: auto; margin-top: 30px;">
					<div class="content2-l" style="width: 840px; display: inline-block; vertical-align: top;">
						<div v-for="o in 5" :key="o"
							style="width: 405px; display: inline-block; margin: 0px 15px 10px 0px;">
							<el-card class="box-card" shadow="never">
								<div slot="header">
									<span
										style="color: #30313;font-weight: bold; background: url(img/title_left.jpg) no-repeat; padding-left: 10px;">政策新闻</span>
									<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
								</div>
								<div class="content2-l-fix">
									<el-image style="width: 150px; height: 100px" :src="url" :fit="fit"></el-image>
									<div style="width: 225px; vertical-align: top; margin-left: 10px; float: right;">
										<h2
											style="font-weight: 700;display: block; overflow: hidden; text-overflow: ellipsis; height: 30px;line-height: 32px; font-size: 15px;white-space: nowrap; color: #666;">
											国家发改委副主任宁吉喆：乘势而上，巩固扩大经济恢复成果的说法是</h2>
										<p
											style="overflow-y: hidden; height: 75px;line-height: 24px; font-size: 14px;color: #aaa;">
											来源：新浪财经文/新浪财经意见领袖专栏作家李湛、方鹏飞、尧艳珍一、海外经济及市场形势（一）美国经济前景仍面临变数，欧洲经济现复苏势头美国制造业PMI与非制造业PMI持续回升，但美国经济前景仍面临不小变数。美国7月I……
										</p>
									</div>
								</div>

								<div class="content2-l-news"
									style="width: 405px; margin-top: 20px;border-top: 1px dotted #c6c6c6; padding-top: 20px;">
									<div v-for="o in 5" :key="o" style="width: 385px;">
										<a
											style="display: block; width: 385px;height: 35px;font-size: 15px; overflow: hidden; color: #666;white-space: nowrap;text-overflow: ellipsis;">国务院关于印发新时期促进集成电路产业和
											软件产业高质量发展若干政策的通知</a>
									</div>
								</div>
							</el-card>
						</div>
					</div>
					<div class="content2-r" style="width: 330px; margin-left: 20px; display: inline-block;">
						<div v-for="o in 5" :key="o" style="width: 330px;">
							<el-card class="box-card" shadow="never">
								<div slot="header">
									<span
										style="color: #30313;font-weight: bold; background: url(img/title_left.jpg) no-repeat; padding-left: 10px;">委员会动态</span>
									<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
								</div>
								<div v-for="o in 5" :key="o" style="width: 310px; height: 38px; line-height: 38px; ">
									<el-link :underline="false">国经济前景仍面临变数，欧洲经济现复苏势头美国制造业PMI与非制造业PMI持续回</el-link>
								</div>
							</el-card>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 1200px;margin: auto; margin-top: 30px; border-top: 2px solid; #000">
				<div v-for="o in 5" :key="o" style="display: inline-block;">
					<el-image style="width: 180px; height: 50px; margin: 10px 10px;" :src="hezuo" :fit="fit"></el-image>
				</div>
			</div>
			<el-divider></el-divider>
			<div class="fotter"
				style="text-align: center; margin-top: 20px; margin-bottom: 20px; font-size: 13px; color: #72767B;">
				京ICP备13xxxxxxx号
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					src: "./img/logo2.png",
					input: "",
					activeIndex: "1",
					fit: "fill",
					src1: "./img/logo.jpg",
					url:"./img/logo.jpg",
					hezuo:"./img/google.png"
				}
			}
		})
	</script>
</html>
